import React, { useEffect, useState } from 'react';
import dayjs from 'dayjs';

import Split from '@/components/Split';
import {
  overView,
  trend,
  structureOverView,
} from '@/services/videoCloudPortal';
import Resources from './Resources';
import DataStat from './DataStat';
import DataCircle from './DataCircle';

const VideoCloudPortal = () => {
  const [loading, setLoading] = useState<boolean>(true);
  const [overViewData, setOverViewData] = useState<any>({});
  const [trendData, setTrendData] = useState<any>({});
  const [structureOverViewData, setStructureOverViewData] = useState<any>({});

  // 获取资源总览数据
  const query = async () => {
    const end = dayjs()
      .endOf('day')
      .unix();
    const begin = dayjs()
      .subtract(6, 'd')
      .startOf('day')
      .unix();

    const queryOverView = overView();
    const queryStructureOverView = structureOverView();
    const queryTrend = trend({ type: 0, begin, end });

    Promise.all([queryOverView, queryStructureOverView, queryTrend])
      .then(res => {
        const [overViewRes, structureOverViewRes, trendRes] = res;
        setOverViewData(overViewRes.data.data);
        setTrendData(trendRes.data.data);
        setStructureOverViewData(structureOverViewRes.data.data);
      })
      .catch(error => {
        console.log(error);
      })
      .finally(() => {
        setTimeout(() => {
          setLoading(false);
        }, 500);
      });
  };

  useEffect(() => {
    query();
  }, []);

  return (
    <>
      <Resources loading={loading} data={overViewData} />
      <Split />
      <DataStat loading={loading} data={overViewData} />
      <Split />
      <DataCircle
        loading={loading}
        chartData={trendData}
        infoData={structureOverViewData}
      />
    </>
  );
};

export default VideoCloudPortal;
